<template>
  <a-table
    :expandRowByClick="false"
    row-key="tag_id"
    :columns="column"
    :pagination="false"
    :data-source="props.list"
    :scroll="{ x: 1500 }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a-tooltip placement="top" color="#fff">
          <template #title>
            {{ record.name }}
          </template>
          <div class="ellipsis-text">{{ record.name }}</div>
        </a-tooltip>
      </template>
      <template v-else-if="column.key === 'type'">
        <span>
          {{ getType(record.type) || '-' }}
        </span>
      </template>
      <template v-else-if="column.key === 'updated_at'">
        <span>
          {{ formatToDateTime(record.updated_at * 1000) || '-' }}
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a class="basicColor" @click="handlePreview(record)">预览<a-divider type="vertical" /></a>
          <a class="basicColor" @click="createCopy(record)">创建副本<a-divider type="vertical" /></a>
          <a class="basicColor" @click="handleEdit(record.id)">编辑<a-divider type="vertical" /></a>
          <a class="basicColor" :href="jumpUrl(record.id)" target="_blank">在线编辑<a-divider type="vertical" /></a>
          <a class="basicColor" @click="deleteTemplate(record)"> 删除 </a>
        </span>
      </template>
    </template>
  </a-table>
  <modal-view
    title="提示"
    v-model:visible="deleteVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要删除该模板吗</span>
  </modal-view>
  <!-- 创建副本 -->
  <modal-view
    title="创建副本"
    v-model:visible="createVisible"
    okText="确定"
    cancelText="取消"
    :width="644"
    :afterClose="handleEditClose"
    @confirm="createConfirm"
    @cancel="createCancel"
  >
    <a-form ref="formRef" :model="formState" :rules="formRules">
      <a-form-item label="模板名称" name="name">
        <a-input
          v-model:value.trim="formState.name"
          :maxlength="30"
          class="input-m-r-16 w-[492px]"
          placeholder="请输入模板名称（30个字以内）"
        />
      </a-form-item>
    </a-form>
  </modal-view>
</template>
<script lang="ts" setup>
import { formatToDateTime } from '@/utils/format'
import ModalView from '@/components/components/modal/ModalView.vue'
import type { TemplateItem } from '@/types/template/published'
import { column, TYPE_INFO } from '../dataSource'
import { JUMP_URL } from '../../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
import { computed, reactive, ref } from 'vue'
import { storage } from '@/utils/storage'
import router from '@/router'
const {
  template: { published_delete, published_create }
} = apis

const emit = defineEmits(['update-list'])
const formRef = ref()
const deleteVisible = ref(false)
const createVisible = ref(false)
const deleteId = ref()
interface SiteData {
  type: number
  list: TemplateItem[]
}
const props = defineProps<SiteData>()
interface IFormState {
  name: string | undefined
  style_name: string | undefined
  type: number | undefined
  video_site_id: string | undefined
  article_site_id: string | undefined
  picture_site_id: string | undefined
  adv_lib_id: string | undefined
  publish_status: number | undefined
}
const formState = reactive<IFormState>({
  name: undefined,
  style_name: undefined,
  type: undefined,
  video_site_id: undefined,
  article_site_id: undefined,
  picture_site_id: undefined,
  adv_lib_id: undefined,
  publish_status: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '请输入模板名称（30个字以内）' }]
})
//删除模板
const deleteTemplate = (record: TemplateItem) => {
  deleteVisible.value = true
  deleteId.value = record.id
}
//弹窗关闭事件
const handleEditClose = () => {
  let key: keyof IFormState
  for (key in formState) {
    formState[key] = undefined
  }
  console.log('formState: ', formState)
}
/**
  删除分类对话框事件
 */
const deleteConfirm = (value: any) => {
  console.log('value: ', value)
  published_delete({ id: deleteId.value }).then(() => {
    deleteVisible.value = value
    message.success('删除成功')
    emit('update-list')
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
}
//预览
const handlePreview = (item: TemplateItem) => {
  router.push({
    name: 'PreviewPage',
    query: {
      template_id: item.id,
      advertiser_id: item.adv_lib_id,
      video_id: item.video_site_id,
      image_id: item.picture_site_id,
      article_id: item.article_site_id
    }
  })
  storage.set('style_data', item.data)
}
//创建副本
const createCopy = (record: TemplateItem) => {
  createVisible.value = true
  const { name, ...params } = record
  Object.assign(formState, params)
}
/**
创建副本对话框事件
 */
const createConfirm = (value: any) => {
  console.log('value: ', value, formState)
  formRef.value.validate().then(() => {
    published_create(formState).then(() => {
      createVisible.value = false
      message.success('创建成功')
      emit('update-list')
    })
  })
}
//编辑
const handleEdit = (id: string) => {
  router.push({ name: 'EditTemplate', query: { id } })
}
//在线编辑地址
const jumpUrl = computed(() => (id: string) => {
  const token = storage.get('token')
  return `${JUMP_URL}?token=${token}&id=${id}`
})
const getType = computed(() => (type: number) => {
  return TYPE_INFO[type]
})
const createCancel = () => {
  createVisible.value = false
}

//创建副本
</script>

<style lang="less" scoped>
:deep(.ellipsis-text) {
  max-width: 154px !important;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
